Vuex是程序开发的状态管理模式，及公共数据管理工具，将共享数据保存到vuex中（组件之间全局存储空间）
（*只有共享的数据才会放到vuex中，私有的数据放在组件的data中即可）
1、安装Vuex    cnpm i vuex -S
2、导入安装包 import Vuex from 'vuex'    在main.js中
3、调用Vuex包 Vue.use(Vuex)   在main.js中
4、创建Vuex实例，在main.js中
    const store = new Vuex.Store({
        state:{//相当于data
            count:0
        },
        mutations:{//相当于methods
            increment(state){//参数最多只能传递2个，但第二个参数可以是数组或对象或单个值
                state.count++
            }
        },
        getters:{
            //只负责对外提供数据，不修改数据。如需修改需使用mutations中的方法
            //【相当于过滤器，与computed比较类似，只要state数据发生改变就会立即更新计算】
            optCount:function(state){
                return '当前最新的count值是：' + state.count
            }
        }
    })
5、在main.js中的vm实例中挂载 store    store: store   (*只要挂载在vm实例上，在全局就能访问vuex数据)
6、组件中访问store中的数据   this.$store.store.count
7、如果使用方法操作store的值，只能通过mutations提供的方法操作，便于查错。
8、组件中调用mutations中的方法： this.$store.commit('方法名')
9、在组件中调用getters中的方法：this.$store.getters.optCount

-------------*********************------------------

实现点击按钮前进倒退的方法
goDetail(id){
    //使用js的形式进行路由导航
    //跳转到指定url
    this.$router.push("/home/goodsinfo/" + id)
    //后退
    this.$router.back()
    //前进
    this.$router.forward()
    //制定跳转前后
    this.$router.go(-1)
}
-------------*********************------------------

实现图片缩略图插件  vue-preview 
1、安装vue-preview插件包： cnpm i vue-preview -S
***如果使用vue-cli时，需要修改webpack.base.conf.js文件中loaders  9-10课

-------------*********************------------------

使用时间插件配置全局过滤器
1.1安装moment包  cnpm i moment -S
1.2在main.js中导入包 import moment from 'moment'
1.3配置全局过滤器

-------------*********************------------------

1.0数据交互（json）vue-resource
1.1安装vue-resource包： cnpm i vue-resource -S

-------------*********************------------------

Mint UI使用，手册网址： mint-ui.github.io/#!/zh-cn
1.1安装mint-ui包：cnpm i mint-ui -S
1.2在main.js中引入包 import MintUI from 'mint-ui'    import 'mint-ui/lib/style.css'
1.2.1【推荐】按需导入mint-ui,首先安装插件包：cnpm i babel-plugin-component -D
1.2.2在.babelrc文件中配置plugins的component属性
1.2.3在main.js中按需导入mint-ui设置

-------------*********************------------------
MUI插件的使用，手册地址： dev.dcloud.net.cn/mui/
MUI不能使用cnpm下载包，需手动从GitHub中下载包解压到项目中使用
1.1将下载到包，拷贝dist目录下的（css、fonts、js）放到src/lib/mui目录下
1.2在main.js中导入mui样式包 import './lib/mui/css/mui.min.css'
1.3将button代码拷贝到app.vue中








-------------*********************------------------

1.0安装VUE包：cnpm i vue -S
1.2在main.js中导入vue包：import Vue from 'vue'。【运行不成功】(注意：此导入的Vue不完整，只提供了runtime-only的方式，没有提供网页版那样的方式)
1.2.1【不推荐】解决方案一：在目录node_modules/vue/package.json的main配置："main":"dist/vue.js"
1.2.2【不推荐】解决方案二：在main.js中设置导入包的路径： import Vue from '../node_modules/vue/dist/vue.js'
1.2.3【不推荐】解决方案三：在webpack.config.js中配置resolve:{alias{"vue$":"vue/dist/vue.js"}}

渲染.vue文件的组件
2.1在main.js中引入vue包： import Vue from 'vue'
2.2新建login.vue文件
2.3在mian.js中导入login组件：import login from './login.vue'
2.4安装vue-loader和内部依赖vue-template-compiler包： cnpm i vue-loader@13.x vue-template-compiler -D
2.5在webpack.config.js中新增loader解析配置项
2.6在main.js中使用render注册login组件【此处解决1.x中存在的问题】

3.1安装vue插件，左下角方框-->搜索vetur
3.2安装  Vue 2 Snippets 插件

组件路由
4.1安装vue-router包： cnpm i vue-router -S
4.2在vue包后面导入vue-router包（在main.js中）：import VueRouter from 'vue-router'
4.3手动调用vue-router（在main.js中）：Vue.use(VueRouter)
4.4创建路由对象router（在main.js中）
4.5在src目录下新建main文件夹，创建Account.vue和Goodslist.vue文件
4.6导入account goodslist组件
4.7 vm上挂载路由
4.8 将<router-view></router-view>放入App.vue文件中

创建子路由
5.1在src下创建subcom文件夹，新建login.vue和register.vue文件
5.2在routes下children配置子路由

css样式
6.1<style scoped></style>设置当前元素子元素样式，父元素不受影响
6.2<style lang="less"></style>设置为less语法

将路由抽离出来
7.1在src目录下新建router.js，将main.js中路由部分剪切到router.js内
7.2导入自定义路由模块  import router from './router.js'

-------------*********************------------------

1. nrm安装包下载地址
    1.1 查看nrm：nrm ls
    1.2 使用淘宝地址： nrm use taobao
2. npm  （是装包工具）国外地址下载
    2.1 使用npm下载安装包： npm i jquery
3. cnpm （是安装包工具）国内地址下载
    3.1 使用前 首先要安装： npm i cnpm -g
    3.2 使用cnpm下载安装包： cnpm i jquery -D
---------------------------------------------
项目开始
****只要出现红色【peerDependencies WARNING】的一定要本地安装一下后面提示的包****
1. 配置项目下的 package.json文件安装： cnpm init -y
2. 【选】安装jQuery： cnpm i jquery -S
3. 清空命令： cls
4. 安装webpack： cnpm install -g webpack@3.x
5. 在根目录新建： webpack.config.js 文件
6. 运行命令： webpack
7. 安装webpack-dev-server： cnpm i webpack-dev-server@2.x -D
8. 在package.json中配置webpack-dev-server为全局，找到"script"添加： "dev":"webpack-dev-server"
9. 运行执行测试语句（会自动刷新页面）： cnpm run dev
9. 收到【peerDependencies WARNING】提示，本地安装webpack： cnpm i webpack@3.x -D
10.在package.json中配置【自动打开浏览器】【设置端口】【设置根路径】【热加载】，找到"script"添加： "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"
    hot的好处：1、不是重新生成bundle.js而是局部打补丁；2、实现浏览器无刷新更新
10.1退出编译： ctrl+c y
11.安装html-webpack-plugin插件，生成内存里面的主页： cnpm i html-webpack-plugin -D
11.1.配置webpack.config.js中的plugins属性
11.2.去掉src/index.html中的bundle.js引入
12.引入css文件，在main.js文件中写入: import './css/index.css'
12.1安装style-loader 和 css-loader : cnpm i style-loader css-loader -D
12.2在webpack.config.js配置module的rules属性
12.3引入less文件，在main.js文件中写入： import './css/index.less'
12.4安装 less-loader ： cnpm i less-loader -D
12.5安装 less ： cnpm i less -D
12.6在webpack.config.js配置module的rules属性
12.7【没成功】引入scss文件，在main.js文件中写入： import './css/index.scss'
12.7【没成功】安装 scss ： cnpm i sass-loader -D 配合安装node-sass :  cnpm i node-sass -D  cnpm i fibers -D
12.8【没成功】在webpack.config.js配置module的rules属性

13添加url（图片、字体、其他文件）处理
13.1安装url-loader 和url内部依赖file-loader ：cnpm i url-loader file-loader -D
13.2在webpack.config.js配置module的rules属性（{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'},）
13.3默认base64格式，配置为普通路径：{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},
   （大于limit值则为实际路径，小于则为base64；默认生成hash名，&name=[hash:8]-[name].[ext]设置保持8位hash值-原有名和后缀名）

14添加ES6的第三方loader，将高级的语法转换成低级的js语法，用webpack打包到bundle.js中
14.1安装包Babel： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
14.2安装包：cnpm i babel-preset-env babel-preset-stage-0 -D
14.2.1根据提示安装包：cnpm i babel-loader@7.x -D
14.3配置webpack.config.js文件中的rules
14.4根目录新建 .babelrc 文件，用于Babel插件的配置，属于json格式  --->配置文件
    "presets":["env","stage-0"],//语法，env包含es5、6、7……
    "plugins":["transform-runtime"]//插件







------------------------------------------------

cnpm i axios --S 会保存到package.json的dependencies中
cnpm i axios --D 会保存到package.json的devDependencies 中
目前除了vue、vue-router在dependencies中，其它都在devDependencies 中。
规则是：带vue的加--S，其它加--D


